
// import { Button } from 'element-ui'
export const addTest = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addTest', {
        model: {
            defaults: {
                name: 'addTest',
                droppable: true,
                attributes: {
                    class:'pie-chart',
                    'data-gjs-type':'addTest'
                },
                traits: [
                ],
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                    // 基于准备好的dom，初始化echarts实例  
                    var myChart = echarts.init(thx);  
                    // 指定图表的配置项和数据  
                    var option = {  
                        title: {  
                            text: '某站点用户访问来源',  
                            subtext: '纯属虚构',  
                            left: 'center'  
                        },  
                        tooltip: {  
                            trigger: 'item'  
                        },  
                        legend: {  
                            orient: 'vertical',  
                            left: 'left',  
                        },  
                        series: [  
                            {  
                                name: '访问来源',  
                                type: 'pie',  
                                radius: ['40%', '70%'],  
                                avoidLabelOverlap: false,  
                                label: {  
                                    show: false,  
                                    position: 'center'  
                                },  
                                emphasis: {  
                                    label: {  
                                        show: true,  
                                        fontSize: '30',  
                                        fontWeight: 'bold'  
                                    }  
                                },  
                                labelLine: {  
                                    show: false  
                                },  
                                data: [  
                                    {value: 1048, name: '搜索引擎'},  
                                    {value: 735, name: '直接访问'},  
                                    {value: 580, name: '邮件营销'},  
                                    {value: 484, name: '联盟广告'},  
                                    {value: 300, name: '视频广告'}  
                                ]  
                            }  
                        ]  
                    };  
                
                    // 使用刚指定的配置项和数据显示图表。  
                    myChart.setOption(option); 
                },
                styles: `
                    .pie-chart{
                        width:600px;
                        height:400px;
                    }
                `},
                init() {
                },
        }
    });

    // 注册组件
    editor.BlockManager.add('add-test', {
        label: '测试',
        category: 'Element-ui组件',
        content: {
            type: 'addTest'
        },
    });
};